<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>level2</title>
    <link rel="stylesheet" href="level2.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav >
        <div class="bird">
            <img src="bird.png" >
            <ul>
                <li><a class="dot" href="#">导航链接一</a></li>
                <li><a class="dot" href="#">导航链接二</a></li>
                <li><a class="dot" href="#">导航链接三</a></li>
                <li><a class="dot1" href="#">导航链接四</a></li>
            </ul>
        </div>
    </nav>
    <!-- 内容 -->
    <div class="w" class="body">
        <article>
            <div class="rightpart">
                <div class="mainhead">
                    <h5>这里以后是一个侧栏，这是侧栏的标题</h5>
                    <div class="mainbody">
                        <table >
                            <tr>
                                <th>请输入邮箱地址</th>
                                <td> <input size="19" type="email" value="这是一个文本输入框"></td>
                            </tr>
                            <tr>
                                <th></th>
                                <td style="font-size: 15px; color: rgb(162,162,162);">邮箱地址请按要求格式输入</td>
                            </tr>
                            <tr>
                                <th>请输入密码</th>
                                <td><input size="19" type="password"></td>
                            </tr>
                            <tr>
                                <th>请重复输入密码</th>
                                <td><input size="19" type="password"></td>
                            </tr>
                            <tr>
                                <th></th>
                                <td style="font-size: 15px; color: rgb(162,162,162);">密码请为6-16位英文数字</td>
                            </tr>
                            <th >性别</th>
                            <td class="unit"><input type="radio" checked="checked" name="sex" class="sex">男<input type="radio" name="sex" class="sex">女</td>
                            <tr>
                                <th>城市</th>
                                <td class="unit"><select name="" id="" >
                                    <option value="" selected=“selected”>北京</option>
                                </select></td>
                            </tr>
                            <tr>
                                <th>爱好</th>
                                <td class="unit"><input type="checkbox" class="checkbox">运动<input class="checkbox" type="checkbox">艺术<input class="checkbox" type="checkbox">科学</td>
                            <tr>
                                <th class="personal">个人描述</th>
                                <td><textarea  class="thetext" cols="27" rows="5" >这是一个多行输入框，输入您的个人描述</textarea></td>
                            </tr>
                        </table>
                        <div class="button"> <button>确认提交</button></div>
                    </div>
                </div>
            </div>
            <div class="details1">
            <h1>文章一级标题</h1>
            <h2>文章二级标题</h2>
            <h3>文章作者 文章发表时间</h3>
            <p>
                这是一个很长很长的段落，这是一个很长很长的段落，
                这是一个很长很长的段落，这是一个很长很长的段落，
                这是一个很长很长的段落，这是一个很长很长的段落，
                这是一个很长很长的段落，这是一个很长很长的段落，
                这是一个很长很长的段落，这是一个很长很长的段落，
                这是一个很长很长的段落，这是一个很长很长的段落，
                这是一个很长很长的段落，这是一个很长很长的段落，
                这是一个很长很长的段落，这是一个很长很长的段落，
                这是一个很长很长的段落，这是一个很长很长的段落，
                这是一个很长很长的段落，这是一个很长很长的段落，换行了
            </p>
            <p>
                这是一个很长很长的段落，这是一个很长很长的段落，
                <a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>
                这是一个很长很长的段落，这是一个很长很长的段落，
                这是一个很长很长的段落，这是一个很长很长的段落，
                这是一个很长很长的段落，这是一个很长很长的段落，
                这是一个很长很长的段落，这是一个很长很长的段落，
                这是一个很长很长的段落，这是一个很长很长的段落，
                这是一个很长很长的段落，这是一个很长很长的段落，
            </p>
            <img src="image1.png" alt="">
            <p>
                这是一个很长很长的段落，这是一个很长很长的段落，
                这是一个很长很长的段落，这是一个很长很长的段落，
                这是一个很长很长的段落，这是一个很长很长的段落，
                这是一个很长很长的段落，这是一个很长很长的段落，换行了
            </p>
            <p>
                这是一个很长很长的段落，这是一个很长很长的段落，
                这是一个很长很长的段落，<strong>这里有个粗体字</strong>
                这是一个很长很长的段落，这是一个很长很长的段落，
                <a target="_blank" href="http://ife.baidu.com">这里有一个链接点击后打开新窗口链接到http://ife.baidu.com</a>
                这是一个很长很长的段落，这是一个很长很长的段落，
                这是一个很长很长的段落，这是一个很长很长的段落，
                这是一个很长很长的段落，这是一个很长很长的段落，
                这是一个很长很长的段落，这是一个很长很长的段落，
            </p>
        </div>
        
            <div class="details2">
                <h1>另一篇文章一级标题</h1>
                <h2>文章二级标题</h2>
                <h3>文章作者 文章发表时间</h3>
                <p>这是一个很长很长的段落，这是一个很长很长的段落，
                    这是一个很长很长的段落，这是一个很长很长的段落，
                    这是一个很长很长的段落，这是一个很长很长的段落，
                    这是一个很长很长的段落，换行了
                </p>
                <p>这是一个很长很长的段落，这是一个很长很长的段落，
                    <a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>
                    这是一个很长很长的段落，这是一个很长很长的段落，
                    <strong>这里有个粗体字</strong>这是一个很长很长的段落，
                    这是一个很长很长的段落，这是一个很长很长的段落，
                    这是一个很长很长的段落，这是一个很长很长的段落，
                    这是一个很长很长的段落，这是一个很长很长的段落，
                </p>
                <img src="image1.png" alt="">
                <ul class="list">
                    <li>项目列表一</li>
                    <li>项目列表二</li>
                    <li>项目列表三</li>
                </ul>
                <!-- <p>列表项目一</p>
                <p>列表项目二</p>
                <p>列表项目三</p> -->
            </div>
            <div class="details3">
                <h1>图片</h1>
                <div class="picture">
                    
                    <div class="part">
                        <h4>好看的图片</h4>
                        <img src="image2.png" alt="">
                    </div>
                    <div class="part">
                        <h4>好看的图片</h4>
                        <img src="image2.png" alt="">
                    </div>
                    <div class="part">
                        <h4>好看的图片</h4>
                        <img src="image2.png" alt="">
                    </div>
                    <div class="part">
                        <h4>好看的图片</h4>
                        <img src="image2.png" alt="">
                    </div>
                    <div class="part">
                        <h4>好看的图片</h4>
                        <img src="image2.png" alt="">
                    </div>
                    <div class="part">
                        <h4>好看的图片</h4>
                        <img src="image2.png" alt="">
                    </div>
                    <div class="part">
                        <h4>好看的图片</h4>
                        <img src="image2.png" alt="">
                    </div>
                    <div class="part">
                        <h4>好看的图片</h4>
                        <img src="image2.png" alt="">
                    </div>
                    
                </div>
            </div>
            <div class="details4">
                <h1>最后一篇文章一级标题</h1>
                <h2>文章二级标题</h2>
                <h3>文章作者 文章发表时间</h3>
                <ol>
                    <li>排名1</li>
                    <li>排名2</li>
                    <li>排名3</li>
                </ol>
                <!-- <p>1.排名1</p>
                <p>2.排名2</p>
                <p>3.排名3</p> -->
                <table  >
                    <tr>
                      <th width="500" >表头</th>
                      <th width="500">表头</th>
                      <th width="200">表头</th>
                    </tr>
                    <tr>
                      <td>表内容单元格</td>
                      <td>表内容单元格</td>
                      <td> <a href="#">操作</a> </td>
                      
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td> <a href="#">操作</a> </td>
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td> <a href="#">操作</a> </td>
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td> <a href="#">操作</a> </td>
                    </tr>
                    <tr class="special">
                        <td>总计</td>
                        <td>1000</td>
                        <td></td>
                    </tr>
                  </table>
            </div>
        </article>
        
    </div>
    <!-- 底部 -->
    <footer>
        版权所有©
    </footer>
</body>
</html>
